
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Get Cursor Position with JavaScript</title>
	<link type="text/css" rel="stylesheet" href="style.css" media="screen" />
</head>

<body>
<div id="container">
	<div id="link">
		<a href="http://www.neoease.com/">Back to NeoEase.com</a>
	</div>
	<div id="viewport">
		<dl>
			<dt>X:</dt><dd id="cursor-x"></dd>
		</dl>
		<dl>
			<dt>Y:</dt><dd id="cursor-y"></dd>
		</dl>
	</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>

</html>

        <script>

            /**
             * 获取鼠标在页面上的位置
             * @param ev		触发的事件
             * @return			x:鼠标在页面上的横向位置, y:鼠标在页面上的纵向位置
             */
            function getMousePoint(ev) {
            	var point = {
            		x:0,
            		y:0
            	};

            	if(typeof window.pageYOffset != 'undefined') {
            		point.x = window.pageXOffset;
            		point.y = window.pageYOffset;
            	}
            	else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
            		point.x = document.documentElement.scrollLeft;
            		point.y = document.documentElement.scrollTop;
            	}
            	else if(typeof document.body != 'undefined') {
            		point.x = document.body.scrollLeft;
            		point.y = document.body.scrollTop;
            	}

            	point.x += ev.clientX;
            	point.y += ev.clientY;

            	return point;
            }

            /**
             * 添加事件
             * @param node		监听对象
             * @param type		监听类型
             * @param listener	触发事件
             * @return			事件是否添加成功
             */
            function addEvent(node, type, listener) {
            	if(node.addEventListener) {
            		node.addEventListener(type, listener, false);
            		return true;
            	} else if(node.attachEvent) {
            		node['e' + type + listener] = listener;
            		node[type + listener] = function() {
            			node['e' + type + listener](window.event);
            		};
            		node.attachEvent('on' + type, node[type + listener]);
            		return true;
            	}
            	return false;
            }

            var container = document.getElementById('container');
            var viewport = document.getElementById('viewport');
            var cursorX = document.getElementById('cursor-x');
            var cursorY = document.getElementById('cursor-y');
            addEvent(container, 'mousemove', function(ev){
            	var cursorPos = getMousePoint(ev);
            	viewport.style.left = cursorPos.x + 'px';
            	viewport.style.top = cursorPos.y + 'px';
            	cursorX.innerHTML = cursorPos.x;
            	cursorY.innerHTML = cursorPos.y;
            });
        </script>